<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
<input id="text" type="text" />
<button onclick="send()">Send</button>
<button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>

  var userID="456066026839";
  var websocket=null;

  $(function(){
    connectWebSocket();
  })

  //建立WebSocket连接
  function connectWebSocket(){

    console.log("开始...");

    //建立webSocket连接
    websocket = new WebSocket("ws://127.0.0.1:8088/websocket");

    //打开webSokcet连接时，回调该函数
    websocket.onopen = function () {
      console.log("onpen");
    }

    //关闭webSocket连接时，回调该函数
    websocket.onclose = function () {
      //关闭连接
      console.log("onclose");
    }

    //接收信息
    websocket.onmessage = function (msg) {
      console.log(msg.data);
    }

  }
  //发送消息
  function send(){
    var postValue={};
    postValue.id=userID;
    postValue.message=$("#text").val();
    websocket.send(JSON.stringify(postValue));
  }
  //关闭连接
  function closeWebSocket(){
    if(websocket != null) {
      websocket.close();
    }
  }
</script>
</body>
</html>